<template>
    <el-container class="login-container">
        <el-header class="login-header">
            <div class="login-logo">
                <img src="../assets/login_logo.png" alt="" srcset="" style="border-right:2px solid gray">
                <span style="font-size:35px;padding-left:10px">物联网平台</span>
            </div>
            <div>
                <a href="#">进入官网</a>  |
                <a href="jiavascript:;" @click="register_btn">注册</a>  |
                <a href="jiavascript:;">中文</a>  |
                <a href="jiavascript:;">English</a> 
            </div> 
        </el-header>
        <el-main class="login-main">
            <div class="img-edge-cover">
                <img src="../assets/login-logo-2.png" alt="" srcset="">
            </div>
            <!-- 账号密码登录 -->
            <el-form label-width="80px" class="demo-ruleForm" v-if="login_pwd">
                <center><p>账号登录</p></center>
                <el-form-item label='账号'>
                    <el-input placeholder='请输入账号' v-model="pwd_login_data.username"></el-input>
                </el-form-item>
                <el-form-item label='密码'>
                    <el-input placeholder='请输入密码' type="password" v-model="pwd_login_data.password"></el-input>
                </el-form-item>
                <el-form-item label='验证码'>
                    <el-input placeholder='输入验证码' v-model="pwd_login_data.code"></el-input>
                    <!-- 图片验证码链接,点击即可重新获取验证码图片 -->
                    <img src="http://127.0.0.1:8000/img_code/" alt="" target="_blank">
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="login_method">提交</el-button>
                    <el-button @click="login_phone_method">手机号登录</el-button>
                </el-form-item>
            </el-form>
            <!-- 手机号登录 -->
            <el-form label-width="80px" class="demo-ruleForm" v-if="login_phone">
                <center><p>手机号登录</p></center>
                <el-form-item label='手机号'>
                    <el-input placeholder='请输入手机号' v-model="phone_login_data.phone"></el-input>
                </el-form-item>
                <el-form-item label='验证码'>
                    <el-input placeholder='输入验证码' v-model="phone_login_data.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="phone_code">发送验证码</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="phone_login_method">登录</el-button>
                    <el-button @click="login_phone_method">密码登录</el-button>
                </el-form-item>
            </el-form>
            <!-- 注册 -->
            <el-form label-width="80px" class="demo-ruleForm" v-if="register_bol">
                <center><p>账号注册</p></center>
                <el-form-item label='用户名'>
                    <el-input placeholder='请输入用户名' v-model="register_data.username"></el-input>
                </el-form-item>
                <el-form-item label='密码'>
                    <el-input placeholder='请输入密码' type="password" v-model="register_data.password1"></el-input>
                </el-form-item>
                <el-form-item label='确认密码'>
                    <el-input placeholder='请确认密码' type="password" v-model="register_data.password2"></el-input>
                </el-form-item>
                <el-form-item label='验证码'>
                    <el-input placeholder='输入验证码' v-model="register_data.code"></el-input>
                    <!-- 图片验证码链接,点击即可重新获取验证码图片 -->
                    <img src="http://127.0.0.1:8000/img_code/" alt="" target="_blank">
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register_method">注册</el-button>
                </el-form-item>
            </el-form>

        </el-main>
        <el-footer class="login-footer">
            <center><span>Copyright © 2020 MiaoMiaoCe/ZenMeasure Co.ltd All rights reserved.京ICP备18013691号-1</span></center>
            
        </el-footer>
    </el-container>
</template>

<script>
import { get_login_get, get_img_code_get, get_register_get, get_phone_code } from './axios_api/api.js'
export default {
    data(){
        return{
            login_pwd: true,
            login_phone: false,
            register_bol: false,
            // 密码登录数据
            pwd_login_data: {
                username: '',
                password: '',
                code: '',
                type: 'pwd'
            },
            // 手机号登录数据
            phone_login_data: {
                phone: '',
                code: '',
                type: 'phone'
            },
            // 用户注册数据
            register_data: {
                username: '',
                password1: '',
                password2: '',
                code: '',
                type: 'register',
            },
            img_code: ''
        }
    },
    mounted() {
        // this.get_code_img()
    },
    methods: {
        // 切换登陆方式的点击事件
        login_phone_method(){
            this.login_phone = !this.login_phone
            this.login_pwd = !this.login_pwd
        },
        // 注册按钮点击事件
        register_btn(){
            this.login_phone = false
            this.login_pwd = false
            this.register_bol = !this.register_bol
        },
        // 获取验证码图片
        get_code_img(){
            get_img_code_get().then(res => {
                console.log(res)
                this.img_code = res
            })
        },
        // 登录
        login_method(){
            let username=this.pwd_login_data.username,password=this.pwd_login_data.password,code=this.pwd_login_data.code;
            get_login_get(this.pwd_login_data).then(res => {
                console.log(res)
                localStorage.setItem('uid',res.uid);
                localStorage.setItem('username',res.username);
                localStorage.setItem('pid',res.pid);
                localStorage.setItem('jwt',res.jwt);
                this.$router.push('/');
            })
        },
        // 获取手机验证码
        phone_code(){
            get_phone_code(this.phone_login_data).then(res => {
                console.log(res);
            })

        },
        // 手机号登录
        phone_login_method(){
            let phone = this.phone_login_data.phone;
            if(!(/^1[34578]\d{9}$/.test(phone))){
                alert('手机号格式错误')
                return false
            }
            get_login_get(this.phone_login_data).then(res => {
                console.log(res)
                if(res.code==406){
                    alert(res.message);
                    return false
                }
                localStorage.setItem('uid',res.uid);
                localStorage.setItem('username',res.username);
                localStorage.setItem('pid',res.pid);
                localStorage.setItem('jwt',res.jwt);
                this.$router.push('/');
            })
        },
        // 注册逻辑
        register_method(){
            let username=this.register_data.username,password1=this.register_data.password1,password2=this.register_data.password2;
            if(username.length < 2 || username.length > 10){
                alert('你的用户名不符合规范');
                return false
            }
            if(password1.length < 6 | username.length > 16){
                alert('你的密码不符合规范');
                return false
            }
            if(password1 != password2){
                alert('两次输入的密码不一致');
                return false
            }
            console.log(this.register_data)
            get_register_get(this.register_data).then(res => {
                console.log(res)
                localStorage.setItem('uid',res.uid);
                localStorage.setItem('username',res.username);
                localStorage.setItem('pid',res.pid);
                this.$router.push('/');
            })

        }
    }
    
}
</script>
<style scoped>
    .login-container {
        height: 100vh;
    }
    .login-header {
        background-color: rgb(255, 255, 255);
        padding:8vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12vh;
    }
    .login-main {
        background-color: rgb(53, 59, 87);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .login-footer {
        background-color: rgb(255, 255, 255);
        /* padding:14vh; */
    }
    .login-logo {
        display: flex;
        align-self: flex-end
    }
    a {
        text-decoration: none;
        color: gray;
        font-size: 10px;
    }
    a:hover {
        text-decoration: none;
        color: blue;
    }
    .demo-ruleForm {
        width: 400px;
        background-color: rgb(255, 255, 255);
        padding: 10px;
        border-radius: 10px;
        align-items: center;
    }
    .img-edge-cover {
        position: relative;
    }
    .img-edge-cover:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        box-shadow:0 0 50px 30px rgb(55,61,90) inset;
    }
    .img-edge-cover img{
        display: block;
        margin-bottom: 20px;
    }
</style>